import Vue from 'vue'
import Vuex from 'vuex'

// 导入
import user from './modules/user'
import settings from './modules/settings.js'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 100,
    list: [1, 2, 3, 4, 5, 6]
    // user:{} // 模块的state
  },
  // getter相当于是基于state的计算属性
  getters: {
    listLength (state) {
      return state.list.length
    },

    doubleCount (state) {
      return state.count * 2
    },
    // getter计算方法还可以接收第二个参数
    // otherCount就依赖了count + listLength
    otherCount (state, getters) {
      return state.count * 2 + getters.listLength
    }
  },
  mutations: {
    pushList (state, payload) {
      state.list.push(payload)
    },
    // addNum (state, payload) {
    //   state.count += payload.num
    // },
    // subNum (state, payload) {
    //   state.count -= payload.num
    // },
    changeNum (state, payload) {
      // 当加的时候
      if (payload.type === 'add') {
        state.count += payload.num
        // 减法的时候
      } else if (payload.type === 'sub') {
        state.count -= payload.num
        // 输入框的时候
      } else if (payload.type === 'change') {
        state.count = payload.num
      }
    }
  },
  // 如果是异步的操作，放到action中处理
  // 1. action可以包含任意的异步操作
  // 2. action中不能修改state数据
  actions: {
    // 写好后，页面中就可以调用这个方法~~

    // action方法 的第一个参数 context 上下文对象 ctx  ==> 指代了store
    // （如果分了模块，ctx指代的就是模块）
    // 第二个参数 payload
    waitToAdd (ctx, payload) {
      setTimeout(() => {
        // console.log(ctx, payload)
        // 不能直接修改数据，需要在action中提交mutation
        ctx.commit('changeNum', payload)
      }, 1000)
    }
  },
  // 模块
  modules: {
    user,
    settings
  }
  // strict: true

})

export default store
